<template>
  <scroll-page :loading="loading" :no-data="noData" :offset="offset" v-on:load="load">
    <article-info :art="a" :key="a.id" class="article-info" v-for="a in articles" />
  </scroll-page>
</template>

<script>
import scrollPage from '@/components/scrollpage/scrollPage'
import Article from './Article'
import { getArticles } from '@/api/article'
export default {
  components: {
    scrollPage,
    'article-info': Article
  },
  data () {
    return {
      loading: false,
      noData: false,
      innerPage: {
        pageSize: 10,
        pageNo: 1,
        name: 'create_time',
        sort: 'desc'
      },
      articles: [
      ],
      path: ''
    }
  },
  props: {
    offset: {
      type: Number,
      default: 100
    },
    queryOptions: {
      type: Object,
      default () {
        return {
          year: '',
          month: '',
          category: '',
          tags: ''
        }
      }
    }
  },
  watch: {
    'queryOptions': {
      handler () {
        this.noData = false
        this.articles = []
        this.innerPage.pageNo = 1
        this.getArticles()
      },
      deep: true
    }
  },
  created () {
    this.getArticles()
  },
  methods: {
    load () {
      this.getArticles()
    },
    getArticles () {
      let that = this
      that.loading = true
      getArticles(that.queryOptions, that.innerPage)
        .then(data => {
          let newArticles = data.data
          if (newArticles && newArticles.length > 0) {
            that.innerPage.pageNo += 1
            that.articles = that.articles.concat(newArticles)
            if (newArticles.length < that.innerPage.pageSize) {
              that.noData = true
            }
          } else {
            that.noData = true
          }
        })
        .catch(error => {
          if (error !== 'error') {
            that.$message({
              type: 'error',
              message: '文章加载失败!',
              showClose: true
            })
          }
        })
        .finally(() => {
          that.loading = false
        })
    }
  }
}
</script>

<style>
.article-info:not(:last-child) {
  margin-bottom: 10px;
}
</style>
